<template>
  <div class="recycle-page">
    <div class="promo-banner"><img :src="promoImage" alt="回收专场" class="promo-image" /></div>
    <div class="product-list"><ProductCard v-for="product in productList" :key="product.id" :product="product" @recycle="startRecycle" /></div>
    <div class="more-models"><button class="more-btn" @click="showMoreModels">更多机型回收</button></div>
  </div>
</template>

<script>
import ProductCard from '@/components/product-card/index.vue'
import specialPageMixin from '@/mixins/specialPage.js'
export default {
  name: 'StylusRecyclePage',
  components: { ProductCard },
  mixins: [specialPageMixin],
  methods: {
    getDefaultCategoryId() { return '100015' },
    getDefaultCategoryName() { return '手写笔' },
    getDefaultPromoImage() { return 'https://image.chushouya.com/assets/images/special/shouxiebi.png' }
  }
}
</script>

<style scoped>
.recycle-page { min-height: 100vh; background: #f5f5f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 0; }
.promo-image { width: 750rpx; height: 300rpx; }
.product-list { width: 750rpx; background: #FFFFFF; border-radius: 32rpx 32rpx 18rpx 18rpx; padding: 1rpx 32rpx 0; margin-top: -30rpx; z-index: 999; position: relative; }
.more-models { padding: 20px 16px 40px; }
.more-btn { width: 100%; background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); color: #333; border: none; padding: 16rpx; border-radius: 50rpx; font-size: 32rpx; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.more-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 165, 0, 0.4); }
</style>